@charset "utf-8";
html, body, #app {width: 100%; height: 100%; overflow: hidden; margin: 0; padding: 0; background-color: #f2f2f2; font-size: 14px; color: #303133; font-family: "Consolas", "Microsoft YaHei UI"; box-sizing: border-box;}

.fade-mod-enter-active, .fade-mod-leave-active {transition: opacity 0.5s ease;}
.fade-mod-enter-from, .fade-mod-leave-to {opacity: 0;}
.fade-ud-enter-active {animation: fadeInDown 0.5s;}
.fade-ud-leave-to {animation: fadeInDown 0.5s reverse;}
.bounce-rt-enter-active {animation: bounceInRight 0.6s;}
.bounce-rt-leave-to {animation: bounceInRight 0.6s reverse;}

/* 动画——fadeInDown——向下淡入 */
@-webkit-keyframes fadeInDown {
  0% {opacity: 0; -webkit-transform: translate3d(0,-20px,0); transform: translate3d(0,-20px,0);}
  to {opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0);}
}
@keyframes fadeInDown {
  0% {opacity: 0; -webkit-transform: translate3d(0,-20px,0); transform: translate3d(0,-20px,0);}
  to {opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0);}
}
/* 动画——bounceInRight——向左飞入 */
@-webkit-keyframes bounceInRight {
  0%, 60%, 75%, 90%, to {-webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1); animation-timing-function: cubic-bezier(.215,.61,.355,1)}
  0% {opacity: 0; -webkit-transform: translate3d(1000px,0,0) scaleX(3); transform: translate3d(1000px,0,0) scaleX(3)}
  60% {opacity:1; -webkit-transform: translate3d(-25px,0,0) scaleX(1); transform: translate3d(-25px,0,0) scaleX(1)}
  75% {-webkit-transform: translate3d(10px,0,0) scaleX(.98); transform: translate3d(10px,0,0) scaleX(.98)}
  90% {-webkit-transform: translate3d(-5px,0,0) scaleX(.995); transform: translate3d(-5px,0,0) scaleX(.995)}
  to {-webkit-transform: translateZ(0); transform: translateZ(0)}
}
@keyframes bounceInRight {
  0%, 60%, 75%, 90%, to {-webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1); animation-timing-function: cubic-bezier(.215,.61,.355,1)}
  0% {opacity: 0; -webkit-transform: translate3d(1000px,0,0) scaleX(3); transform: translate3d(1000px,0,0) scaleX(3)}
  60% {opacity: 1;-webkit-transform: translate3d(-25px,0,0) scaleX(1); transform: translate3d(-25px,0,0) scaleX(1)}
  75% {-webkit-transform: translate3d(10px,0,0) scaleX(.98); transform: translate3d(10px,0,0) scaleX(.98)}
  90% {-webkit-transform: translate3d(-5px,0,0) scaleX(.995); transform: translate3d(-5px,0,0) scaleX(.995)}
  to {-webkit-transform: translateZ(0); transform:translateZ(0)}
}

/* 通用样式 */
.hide {display: none;}
.w100 {width: 100%;}
.h100 {height: 100%;}
.no-data {height: 50px; line-height: 50px; text-align: center; color: #909399;}
.required {color: #F56C6C;}
.cur {cursor: pointer;}
.img {width: 100%; height: 100%;}
.max-img {max-width: 100%;}

/* 弹出层及对话框样式 */
.modal-backdrop {height: 100%; position: fixed; z-index: 2; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, .5); overflow: hidden;}
.modal {background-color: #FFF; box-shadow: 2px 2px 5px #555; border-radius: 4px; margin: 6px auto;}
.modal-header {color: #303133; border-bottom: 1px solid #EEE; padding: 15px; display: flex; display: -webkit-flex;}
.header-left {flex-grow: 1; font-size: 18px;}
.header-right {width: 20px; text-align: right; cursor: pointer;}
.header-right:hover {color: #009688;}
.modal-body {padding: 10px 20px; overflow: hidden;}
.modal-footer {border-top: 1px solid #EEE; padding: 15px; display: flex; display: -webkit-flex; justify-content: flex-end;}

/* 表单样式 */
select, input {font-family: "Consolas", "Microsoft YaHei UI"; border: 1px solid #DCDFE6; border-radius: 4px; color: #303133; outline: medium;}
input:focus {border: 1px solid #66B1FF;}

.ipt {width: calc(100% - 20px); padding: 8px;}
.ipt:focus {border: 1px solid #66B1FF;}
.ipt-title {color: #606266; font-size: 16px; padding-top:15px;}
.desc-txt {width: calc(100% - 20px); height: 150px; font-family: "Consolas", "Microsoft YaHei UI"; border: 1px solid #DCDFE6; border-radius: 4px; padding: 5px 10px; color: #303133; line-height: 20px;}
.desc-txt:focus {border: 1px solid #66B1FF; outline: none;}
.sch-ipt {width: 226px; height: 28px; padding-left: 10px;}

/* 按钮样式 */
.btn-pi {min-width: 60px; height: 32px; line-height: 32px; padding: 0 10px; background-color: #409eff; border-radius: 4px; text-align: center; color: #FFF; cursor: pointer;}
.btn-pi:hover {background-color: #4098fc;}
.btn-ps {min-width: 60px; height: 32px; line-height: 32px; padding: 0 10px; background-color: #67c23a; border-radius: 4px; text-align: center; color: #FFF; cursor: pointer;}
.btn-ps:hover {background-color: #36ad6a;}
.btn-pw {min-width: 60px; height: 32px; line-height: 32px; padding: 0 10px; background-color: #e6a23c; border-radius: 4px; text-align: center; color: #FFF; cursor: pointer;}
.btn-pw:hover {background-color: #fcb040;}
.btn-pe {min-width: 60px; height: 32px; line-height: 32px; padding: 0 10px; background-color: #f56c6c; border-radius: 4px; text-align: center; color: #FFF; cursor: pointer;}
.btn-pe:hover {background-color: #de576d;}
.btn-d {min-width: 58px; height: 30px; line-height: 32px; padding: 0 10px; background-color: #FFF; border-radius: 4px; text-align: center; color: #737478; cursor: pointer; border: 1px solid #c8c9cc;}
.btn-d:hover {background-color: #eceded;}
.btn-di {min-width: 58px; height: 30px; line-height: 32px; padding: 0 10px; background-color: #f4f4f5; border-radius: 4px; text-align: center; color: #409eff; cursor: pointer; border: 1px solid #c8c9cc;}
.btn-di:hover {background-color: #cee3fc;}
.btn-ds {min-width: 58px; height: 30px; line-height: 32px; padding: 0 10px; background-color: #daf0e4; border-radius: 4px; text-align: center; color: #67c23a; cursor: pointer; border: 1px solid #b3e19d;}
.btn-ds:hover {background-color: #cceada;}
.btn-dw {min-width: 58px; height: 30px; line-height: 32px; padding: 0 10px; background-color: #fdf0db; border-radius: 4px; text-align: center; color: #e6a23c; cursor: pointer; border: 1px solid #f3d19e;}
.btn-dw:hover {background-color: #fceace;}
.btn-de {min-width: 58px; height: 30px; line-height: 32px; padding: 0 10px; background-color: #f7dee3; border-radius: 4px; text-align: center; color: #f78282; cursor: pointer; border: 1px solid #fab6b6;}
.btn-de:hover {background-color: #f5d2d9;}
.btn-r {width: 30px; height: 30px; line-height: 32px; background-color: #FFF; border-radius: 50%; text-align: center; color: #737478; cursor: pointer; border: 1px solid #c8c9cc;}
.btn-r:hover {background-color: #eceded;}
.btn-n {height: 30px; line-height: 30px; padding: 0 10px; text-align: center; color: #f0a020; cursor: pointer;}
.btn-n:hover {color: #fceace;}

/* 复选框、单选框样式 */
.chk {color: #666; cursor: pointer; font-size: 18px;}
.chk:hover {color: #409EFF;}
.chked {color: #409EFF; cursor: pointer; font-size: 18px;}

/* 文本内容加省略号 */
.dan {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.duo {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}